<template>
    <div class="container">
        <span>使用系统须知</span>
        <div class="title">介绍</div>
        <div class="content">
            <p>基于SpringBoot+elFinder+vue+axios+vuex搭建文件管理器，支持本地磁盘和阿里云，提供TinyMCE5集成范例。</p>
        </div>
        <div class="title">环境搭建</div>
        <div class="content">
            <table>
                <tr>
                    <th>软件</th>
                    <th>版本</th>
                    <th>功能</th>
                    <th>地址</th>
                </tr>
                <tr>
                    <td>SpringBoot</td>
                    <td>2.1.0.RELEASE</td>
                    <td>全能框架</td>
                    <td><a href="https://spring.io/projects/spring-boot/" target="_blank">https://spring.io/projects/spring-boot/</a></td>
                </tr>
                <tr>
                    <td>elFinder</td>
                    <td>2.1.53</td>
                    <td>Web文件管理器</td>
                    <td><a href="https://studio-42.github.io/elFinder/" target="_blank">https://studio-42.github.io/elFinder/</a></td>
                </tr>
                <tr>
                    <td>TinyMCE5</td>
                    <td>5.2.0</td>
                    <td>在线编辑器</td>
                    <td><a href="https://www.tiny.cloud/" target="_blank">https://www.tiny.cloud/</a></td>
                </tr>
                <tr>
                    <td>vue+axios+vuex</td>
                    <td>3.0</td>
                    <td>前端框架</td>
                    <td><a href="https://cn.vuejs.org/" target="_blank">https://cn.vuejs.org/</a></td>
                </tr>
                <tr>
                    <td>element-plus</td>
                    <td>2.7.4</td>
                    <td>前端组件</td>
                    <td><a href="https://element-plus.org" target="_blank">https://element-plus.org</a></td>
                </tr>
            </table>
        </div>
        <div class="title">开源项目参考</div>
        <div class="content">
            <table>
                <tr>
                    <th>软件</th>
                    <th>地址</th>
                </tr>
                <tr>
                    <td>elfinder-java-connector</td>
                    <td><a href="https://github.com/trustsystems/elfinder-java-connector" target="_blank">https://github.com/trustsystems/elfinder-java-connector</a></td>
                </tr>
                <tr>
                    <td>spring-elfinder</td>
                    <td><a href="https://github.com/konglinghai123/spring-elfinder" target="_blank">https://github.com/konglinghai123/spring-elfinder</a></td>
                </tr>
            </table>
        </div>
        <div class="title">功能</div>
        <div class="content">
            <p>此文件管理器具有以下功能：</p>
            <ol>
                <li>文件以及文件夹新增，删除，移动，重名</li>
                <li>在线打包文件</li>
                <li>文件下载、上传</li>
                <li>在线预览文件，图片</li>
                <li>在线处理图片，文件</li>
                <li>支持目录上传</li>
                <li>支持zip tar Gzip 的在线解压和压缩文件夹</li>
                <li>支持多种文本格式的高亮显示和在线编辑</li>
                <li>支持在线文件预览</li>
                <li>支持文件夹权限设置</li>
                <li>支持国际化</li>
                <li>支持阿里云OSS</li>
                <li>支持本地磁盘与阿里云OSS之间的拖拽</li>
                <li>集成至TinyMCE5</li>
            </ol>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    span {
        font-size: 40px;
        font-weight: 700;
        text-align: center;
    }
    .title {
        font-size: 30px;
        font-weight: 600;
        margin: 20px 0;
    }
    .content {
        p {
            text-indent: 2em;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }
            th {
                background-color: #f2f2f2;
            }
            a {
                color: #3498db;
                text-decoration: none;
            }
        }
        ol {
            padding-left: 20px;
            li {
                line-height: 30px;
                list-style-type: disc;
            }
        }
    }
}
</style>
